<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script>
            window.onload = function() {
                //登陆按钮的事件...
                document.getElementById('btnSub').onclick = function() {
                    //声明一个变量, 用于创建一个httpRequest对象
                    //专门用于和服务器交互的对象

                    var xhr;
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    if (window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                    } else {
                        //// code for IE6, IE5
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    //打开一个通往服务器的连接 => 向服务器发送请求
                    xhr.open("POST", 'login.txt', false);//true : 异步 | false : 同步

                    this.textContent = '正在登陆...';

                    xhr.onreadystatechange = function() {
                        //请求对象的状态 4 表明请求成功，服务器的内容返回到客户端的页面
                        if (xhr.readyState == 4) {
                            //responseText为服务器返回的内容
                            //xhr.responseText = '{status:true}';

                            //eval底层方法 （把字符串的内容 转换成javascript的对象）
                            var resObj = eval('(' + xhr.responseText + ')');
                            //resObj = {status:true};

                            if (resObj['status']) {
                                alert('登陆成功!');
                            } else {
                                alert('账号密码错误!');
                            }
                        }
                    };
                    xhr.send();
                };
            };
        </script>
    </head>

    <body>
        <table border = 1 style = 'width:400px;border-collapse:collapse;border:1px solid #6fc6ef'>
            <tr>
                <td>姓名:</td>
                <td><input type = 'text' /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type = 'password' /></td>
            </tr>
            <tr>
                <td colspan = 2 style = 'text-align:center'>
                    <button id = 'btnSub' type = 'button'>登陆</button>
                    <button>重置</button>
                </td>
            </tr>
        </table>

        <button type = 'button' onclick = 'alert("test");'>测试按钮</button>
    </body>
</html>